import 'dart:math';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:test01/okhttp_test/pojo/commentdto_pojo.dart';



/*
*
* 轮播图以及动画
*
* */
///轮播图
class SwiperPage extends StatefulWidget {
  ///传值
  ListModel listmodel;
  double proportion_height;

  SwiperPage(this.listmodel, this.proportion_height);

  @override
  SwiperPageState createState() => SwiperPageState();
}

class SwiperPageState extends State<SwiperPage> {
  var swiperPagination;
  String url;
  int itemCount = 0; //显示的条数
  int url_show = 1; //正在显示的条数
  ///切换图片圆圈大小
  double min_circular = 2.0;
  double midlle_circular = 4.0;
  double max_circular = 6.0;

  ///设置最终显示宽度
  double circular_with;

  ///判断是否启用动画
  bool circular_bool = false;

  ///Container宽度
  double container_with_circular=40;

  ScrollController controller = ScrollController();


  ///设置偏移值
  offsetCircular(int urlShow) {
   if (itemCount > 5) {
     if (urlShow >2 && urlShow <7) {
       controller.animateTo(((urlShow - 3) *9).toDouble(),
           duration: Duration(milliseconds: 300), curve: Curves.easeInOutSine);
     }
     else{
       if(urlShow>=7){
         controller.animateTo(((urlShow - 3) *9).toDouble(),
             duration: Duration(milliseconds: 300), curve: Curves.easeInOutSine);
       }
     }
   }
 }
  ///设置偏移值之后的动态宽度
  containerWithCircular() {
    if(url_show<=3){
      container_with_circular=40;
    }
    if(url_show<=6&&url_show>3){
      container_with_circular=38;
    }
    if(url_show>6){
      container_with_circular=41;
    }

 }



  @override
  Widget build(BuildContext context) {
    ///设置显示条数
    if (widget.listmodel.picUrls.length != 0) {
      itemCount = widget.listmodel.picUrls.length;
    } else {
      itemCount = widget.listmodel.videos.length;
    }

    return Column(
          children: [
            Container(
              height: widget.proportion_height,
              child: Stack(
                children: <Widget>[
                  Swiper(
                    itemBuilder: (BuildContext context, int index) {
                      ///设置图片路径
                      if (widget.listmodel.picUrls.length != 0) {
                        url = widget.listmodel.picUrls[index].url;
                      } else {
                        url = widget.listmodel.videos[index].coverUrl;
                      }
                      return GestureDetector(
                        onTap: (){
                          Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) =>HeroPicture(herourl: url,herorandom:"${widget.listmodel.id}_$index")));
                          print("----------------图片放大------------------");
                        },
                        child:Hero(
                          tag: 'hero${widget.listmodel.id}_$index',
                          child: Container(
                            child:
                            // Image.network(url,fit:BoxFit.cover,),
                            CachedNetworkImage(
                            imageUrl: url,
                            fit: BoxFit.cover,
                          )
                            ) ,
                          ),
                        );
                    },
                    itemCount: itemCount,
                    ///获取图片滑动时的数据动态，利用回调函数进行赋值
                    onIndexChanged: (index) {
                      ///当前滑动的下标
                      url_show = index + 1;
                      ///调用宽度
                      containerWithCircular();
                      ///调用偏移方法
                      offsetCircular(url_show);
                      ///初始化
                      setState(() {});
                    },
                    autoplay: false,
                    loop: false,
                  ),
                  itemCount > 1
                      ? Container(
                    alignment: Alignment(1, -1),
                    child: Container(
                      width: 40,
                      height: 23,
                      alignment: Alignment.center,
                      margin: EdgeInsets.only(right: 16),
                      decoration: BoxDecoration(
                          color: Colors.black.withOpacity(0.5),
                          borderRadius: BorderRadius.circular(23)),
                      child: Text(
                        "$url_show/$itemCount",
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  )
                      : Container(),
                ],
              ),
            ),
            Container(
                alignment: Alignment.center,
                height: 28,
                child: Container(
                  width: container_with_circular,
                  child: itemCount==1 ? Container():ListView.builder(
                    physics: NeverScrollableScrollPhysics(),
                    scrollDirection: Axis.horizontal,
                    reverse: false,
                    itemBuilder: (BuildContext context, int index) {
                      ///设置圆圈大小
                      if (index == (url_show - 1)) {
                        circular_with = midlle_circular;
                        circular_bool = true;
                      } else {
                        circular_with = midlle_circular;
                        circular_bool = false;
                      }
                      if(url_show<3){
                        if(index==4){
                          circular_with = min_circular;
                          circular_bool = false;
                        }
                      }
                      if (itemCount > 5) {
                        ///右边圆圈大小
                        if ((url_show + 1) > 3 && (url_show + 2) < itemCount) {
                          if ((index) == (url_show + 1)) {
                            circular_with = min_circular;
                            circular_bool = false;
                          }
                        }
                        ///左边圆圈大小
                        if ((url_show - 3) !=0 && (url_show - 1) <= 5) {
                          if ((index) == (url_show - 3)) {
                            circular_with = min_circular;
                            circular_bool = false;
                          }
                        }
                        else{
                          if ((url_show +1)>5) {
                            if (index == 4) {
                              circular_with = min_circular;
                              circular_bool = false;
                            }
                          }
                        }
                      }

                      return Container(
                        // color: Colors.red,
                        alignment: Alignment.center,
                        child: AnimatedContainer(
                            margin: EdgeInsets.only(left:  index != 0 ? 5 : 0,right: index ==(itemCount-1) ?1:0),
                            height: circular_bool ? max_circular : circular_with,
                            width: circular_bool ? max_circular : circular_with,
                            decoration: BoxDecoration(
                                color: Colors.black.withOpacity(0.5),
                                borderRadius: BorderRadius.circular(circular_with)),
                            duration: Duration(milliseconds: 300)),
                      );
                    },
                    itemCount: itemCount,
                    controller: controller,
                    // itemExtent: 50,
                  ),
                )
            )
          ],
    );

  }
}

///图片hero效果
class HeroPicture extends StatefulWidget {
  final String herourl;
  final String herorandom;

  const HeroPicture({Key key,this.herourl,this.herorandom}) : super(key: key);


  @override
  _HeroPictureState createState() => _HeroPictureState();
}

class _HeroPictureState extends State<HeroPicture> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          color: Colors.black,
          alignment: Alignment.center,
          child: Hero(
            tag: 'hero${widget.herorandom}',
            child:GestureDetector(
              ///指针移动事件
              onVerticalDragUpdate: (v) =>  Navigator.pop(context),
              // onTap: (){
              //   Navigator.pop(context);
              // },
              child:Image.network(widget.herourl,fit: BoxFit.cover,),
            ),
            ),)
    );
  }
}
